<template>
  <div>
    <el-input
        class="input-with-select"
        v-model="components_fuzzy_search.value"
        @keyup.enter="components_querySearchHandleName()"
        @blur="check_input"
        ref="inputRef"
    >
      <template #prepend>
        <el-radio-group v-model="components_fuzzy_search.mode">
          <el-radio-button value="助记码">助记码</el-radio-button>
          <el-radio-button value="名称">名称</el-radio-button>
        </el-radio-group>
      </template>

      <template #append>
        <el-button @click="clear_all()">
          <el-icon>
            <Delete/>
          </el-icon>
        </el-button>
      </template>

    </el-input>
  </div>

  <!-- 弹出选择框 -->
  <el-dialog v-model="visible" :width="500" @close="dialog_close">
    <el-table
        :data="tableData"
        border
        style="width: 100%"
        @row-dblclick="components_handleSelectHandleName"
        stripe
    >
      <el-table-column type="index" width="50"/>
      <el-table-column prop="handle_name" label="处理方名称"/>
      <el-table-column prop="mnemonic" label="助记码"/>
      <el-table-column prop="handle_group_name" label="所属分组"/>
    </el-table>
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[100, 200, 500]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total=" total "
    />
  </el-dialog>
</template>

<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import {HandleFuzzyList, HandleFuzzySearchResponse} from "@/api/first/FuzzySearch/type.ts";
import {reqHandleFuzzySearch} from "@/api/first/FuzzySearch";
import {Delete} from "@element-plus/icons-vue";

const check_input = () => {
  if (components_fuzzy_search.value !== components_fuzzy_search.old_value)
    components_fuzzy_search.value = components_fuzzy_search.old_value
}

// 小类列表前端分页
const background = ref<boolean>(true)  // 是否带背景方框
const disabled = ref<boolean>(false)  // 是否可用
const small = ref<boolean>(false)  // 普通大小还是小一号
const currentPage = ref<number>(1)  // 当前所在页数
const pageSize = ref<number>(100)  // 一页有几条记录
const total = ref<number>(0) // 总条数
watch([currentPage, pageSize], () => {
  tableData = total_data.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
})
let tableData: HandleFuzzyList[] = []
let total_data: HandleFuzzyList[] = []

// 弹出选择框
const visible = ref(false)

const components_fuzzy_search = reactive<HandleAutoCompletion>({
  mode: '名称',
  value: '',
  old_value: '',

  handle_name: '',  // 模糊搜索 处理方名称
  handle_id: null,
})

export interface HandleAutoCompletion {
  mode: '名称' | '助记码'
  value: string
  old_value: string

  handle_name: string  // 模糊搜索 处理方名称
  handle_id: number | null
}

// 使用使用方名称进行模糊搜索
const components_querySearchHandleName = () => {
  if (components_fuzzy_search.value !== components_fuzzy_search.old_value) {
    // 执行查询操作
    reqHandleFuzzySearch({
      mode: components_fuzzy_search.mode,
      fuzzy_search_object: components_fuzzy_search.value
    }).then((result: HandleFuzzySearchResponse) => {
      // 弹出选择框
      visible.value = true

      total_data = result.handle_fuzzy_list
      tableData = total_data.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
      total.value = result.handle_fuzzy_list.length
    })
  }
}

const inputRef = ref() // 用于关闭选择框之后使得选择框重新选中

// 在模糊搜索返回结果中点击确定后，保存搜索结果，清理掉之前的搜索结果
const components_handleSelectHandleName = (item: HandleFuzzyList) => {
  components_fuzzy_search.handle_name = item.handle_name
  components_fuzzy_search.handle_id = item.handle_id
  components_fuzzy_search.value = item.handle_name
  components_fuzzy_search.old_value = item.handle_name
  cmy('DataUse', components_fuzzy_search)
  visible.value = false
}

// 选择框关闭时输入框恢复焦点
const dialog_close = () => {
  inputRef.value.focus()
}

const clear_all = () => {
  clear_input()
  cmy('DataClear')
}

const abc = defineProps(["disable", 'content']);
if (abc.content !== undefined) {
  components_fuzzy_search.value = abc.content
  components_fuzzy_search.old_value = abc.content
} else {
  components_fuzzy_search.value = ''
  components_fuzzy_search.old_value = ''
}
// DataUse：当点击候选词条后，通过该函数传递选中词条的信息
// DataClear：当点击删除图标之后执行
const cmy = defineEmits(["DataUse", "DataClear"]);
const clear_input = () => {
  components_fuzzy_search.handle_name = ''
  components_fuzzy_search.handle_id = null
  components_fuzzy_search.value = ''
  components_fuzzy_search.old_value = ''
}
const make_input_value = (val: string) => {
  components_fuzzy_search.value = val
  components_fuzzy_search.old_value = val
}
// clear_input：清除输入框中的内容 input_content：指定输入框中的内容
defineExpose({clear_input, make_input_value});
</script>

<style>
.input-with-select .el-input-group__prepend {
  padding: 0;
}
</style>
